import React from 'react';
import './DeliveryDetail.css'
import {Table,Pagination} from 'antd'
import {observer,inject} from 'mobx-react'
import DeliveryDetail from './DeliveryDetail/DeliveryDetail'
import axios from '../../../utils/http'
import * as api from '../../../utils/api'
import {withRouter} from 'react-router-dom'

@inject('curOrder')
@observer
class Deliverylist extends React.Component {
    constructor(){
        super()
        this.state={
            columns:[
                {
                    title:'发货单流水号',
                    dataIndex:'invoiceSernum',
                    align:'center',
                },
                {
                    title:'订单号',
                    dataIndex:'invoiceOrdercode',
                    align:'center',
                },
                {
                    title:'下单时间',
                    dataIndex:'invoiceOrdertime',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {new Date(record.invoiceOrdertime).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                            </div>
                        )
                    }
                },
                {
                    title:'收货人',
                    dataIndex:'harvestPeople',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.memLocations.memName}
                            </div>
                        )
                    }
                },
                {
                    title:'发货时间',
                    dataIndex:'invoiceDt',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {new Date(record.invoiceDt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                            </div>
                        )
                    }
                },
                {
                    title:'发货单状态',
                    dataIndex:'invoiceStatus',
                    align:'center',
                    render:(text,record,index)=>{
                        let faHuoStateNum = record.invoiceStatus
                        switch(faHuoStateNum){
                            case 0: faHuoStateNum = '未发货';break;
                            case 1: faHuoStateNum = '发货中';break;
                            default: faHuoStateNum = '已发货';
                        }
                        return(
                            <div>
                                {faHuoStateNum}
                            </div>
                        )
                    }
                },
                {
                    title:'操作人',
                    dataIndex:'operateMan',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.im.imOperator}
                            </div>
                        )
                    }
                },
                {
                    title:'操作',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                <button className="copyBtn" onClick={()=>this.openCurHandle(record)}>查看</button>
                            </div>
                        )
                    }
                },
            ],
            data:[
                {
                    key:0,
                    fahuodanId:0,
                    fahuodanliushuihao:'2017081157525010',
                    orderNum:'2017081157525010',
                    xiaDanTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    harvestPeople:'杨雪',
                    fahuoTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    fahuoState:'已发货',
                    operateMan:'admin'
                },
                {
                    key:1,
                    fahuodanId:1,
                    fahuodanliushuihao:'2017081157525010',
                    orderNum:'2017081157525010',
                    xiaDanTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    harvestPeople:'杨雪',
                    fahuoTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    fahuoState:'已发货',
                    operateMan:'admin'
                },
                {
                    key:2,
                    fahuodanId:2,
                    fahuodanliushuihao:'2017081157525010',
                    orderNum:'2017081157525010',
                    xiaDanTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    harvestPeople:'杨雪',
                    fahuoTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    fahuoState:'已发货',
                    operateMan:'admin'
                },
                {
                    key:3,
                    fahuodanId:3,
                    fahuodanliushuihao:'2017081157525010',
                    orderNum:'2017081157525010',
                    xiaDanTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    harvestPeople:'杨雪',
                    fahuoTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                    fahuoState:'已发货',
                    operateMan:'admin'
                },
            ],
            curPageData:[],
            curPage:1,
            curPageSize:3,
            faHuoLiuShuiHao:'',//发货单流水号查询
            orderNumber:'',//订单号
            shouHuoPeople:'',//收货人
            faHuoDanState:'',//发货单状态
        }
    }
    componentDidMount(){
        // 向后台请求订单列表的数据
        this.getDeliveryAxiosData()

        // console.log(this.state.data)
        // let curPage = 1
        // let curPageSize = 3
        // let start = (curPage-1)*curPageSize
        // let end = start + curPageSize
        // let curPageData = this.state.data.slice(start,end)
        // this.setState({
        //     curPage:curPage,
        //     curPageSize:curPageSize,
        //     curPageData:curPageData
        // })
    }
  //请求发货单列表   
  getDeliveryAxiosData = ()=>{
    axios({
        url:api.QUERYINVOICE,
        method:'GET',
    }).then(data=>{
        // console.log(data.data.data)
        let dataArr = data.data.data
        dataArr = dataArr.map((item,i)=>{
            item.key = i+1
            return item
        })
        let curPage = 1
        let curPageSize = 3
        let start = (curPage-1)*curPageSize
        let end = start + curPageSize
        let curPageData = dataArr.slice(start,end)
        this.setState({
            curPage:curPage,
            curPageSize:curPageSize,
            curPageData:curPageData,
            data:dataArr
        })
    })    
  }
  //奇偶行的样式
  getRowClassName = (record, index) => {
    let className = '';
    className = index % 2 === 0 ? 'oddRowStyle' : 'evenRowStyle';
    return className;
  }   
  //查看当前行信息   
  openCurHandle = (curRowData)=>{
    // console.log(curRowData)
    /* 在mobx和本地存储中保存当前行的团购ID */
    this.props.curOrder.changeCurFaHuoDan(curRowData.invoiceId)
    let val = true
    this.props.curOrder.chnageFromOrderToFaHuoDan(val)
    this.props.history.push('/Home/dingDan/Deliverylist/Deliverydetail')
  }
  // 页码改变的时候   
  pageNumChange = (page,pageSize)=>{
    let start = (page-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:page,
        curPageData:curPageData
    })
  }
 //跳到首页
 toPageStart = ()=>{
    let curPage = 1
    let start = (curPage-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:curPage,
        curPageData:curPageData
    })
 }   
// 跳转到尾页
toPageEnd = ()=>{
    let totalPage = Math.ceil(this.state.data.length/this.state.curPageSize)
    let start = (totalPage-1)*this.state.curPageSize
    let end = start + this.state.curPageSize
    let curPageData = this.state.data.slice(start,end)
    this.setState({
        curPage:totalPage,
        curPageData:curPageData
    })
}
// 发货单流水号
changeFaHuoLiuShuiHao = (e)=>{
    this.setState({
        faHuoLiuShuiHao:e.target.value
    })
}
// 订单号
changeOrderNumber = (e)=>{
    this.setState({
        orderNumber:e.target.value
    })
}
// 收货人
changeShouHuoPeople = (e)=>{
    this.setState({
        shouHuoPeople:e.target.value
    })
}
// 发货单状态
changeFaHuoDanState = (e)=>{
    console.log(e.target.value)
    if(parseFloat(e.target.value) === 3){
        this.setState({
            faHuoDanState:''
        })
    }else{
        this.setState({
            faHuoDanState: parseFloat(e.target.value)
        })
    }
}
// 条件查询发货单列表
searchFaHuoDanList = ()=>{
    if(this.state.faHuoLiuShuiHao!=='' || this.state.orderNumber!=='' || this.state.shouHuoPeople!==''|| this.state.faHuoDanState!==''){
        axios({
            url:api.QUERYINVOICEBYTerm,
            method:'GET',
            params:{
                invoiceSernum:this.state.faHuoLiuShuiHao,
                invoiceOrdercode:this.state.orderNumber,
                memName:this.state.shouHuoPeople,
                invoiceStatus:this.state.faHuoDanState,
            }
        }).then(data=>{
            let dataArr = data.data.data
            dataArr = dataArr.map((item,i)=>{
                item.key = i+1
                return item
            })
            let curPage = 1
            let curPageSize = 3
            let start = (curPage-1)*curPageSize
            let end = start + curPageSize
            let curPageData = dataArr.slice(start,end)
                this.setState({
                    curPage:curPage,
                    curPageSize:curPageSize,
                    curPageData:curPageData,
                    data:dataArr
                })
            })
    }
}
    render(){
        return (
            <div>
                <div className="deliveryBox">
                    <h1>发货单管理</h1>
                    {/*  筛选查询  */}
                    <div className="searchClass toInlineBlock">
                        <label className="teshuLabelClass">发货单流水号 <input type="text" name="teamNum" onChange={this.changeFaHuoLiuShuiHao}/></label>
                        <label>订单号 <input type="text" name="teamNum" onChange={this.changeOrderNumber}/></label>
                        <label>收货人 <input type="text" name="teamNum" onChange={this.changeShouHuoPeople}/></label>

                        发货单状态
                        <select name="" id="" onChange={this.changeFaHuoDanState}>
                            <option value={3}>请选择</option>
                            <option value={0}>未发货</option>
                            <option value={1}>发货中</option>
                            <option value={2}>已发货</option>
                        </select>
                        <button type="button" className="searchBtn" onClick={this.searchFaHuoDanList}>搜索</button>
                    </div>

                    <Table columns={this.state.columns} dataSource={this.state.curPageData} pagination={false} rowClassName={this.getRowClassName}/>

                    <div className="pagenationbox clearFloat">
                        <div className='pageNation'>
                            <div className='clearFloat'>
                                <div className='floatLeft'>
                            <Pagination
                                className='purpleTxt'
                                total={this.state.data.length}
                                defaultCurrent={this.state.curPage}
                                defaultPageSize={this.state.curPageSize}
                                current={this.state.curPage}
                                showTotal={total => `共${Math.ceil(this.state.data.length/this.state.curPageSize)}页${total}条记录`}
                                onChange={this.pageNumChange}
                            />
                        </div>
                                <div className="pageBtnBox">
                                    <span className="checkBtn" onClick={this.toPageStart}>首页</span>
                                    <span className="checkBtn" onClick={this.toPageEnd}>尾页</span>
                                </div>
                            </div>
                        </div>
                              </div>
                        </div>
            </div>
            );
    }
}
export default withRouter(Deliverylist);